import { Grid, Tag, Tooltip } from 'antd';
import React from 'react';

export type CurrentBreakpointProps = React.HTMLProps<HTMLDivElement> & {
  showLabel?: boolean;
};

type BreakpointType = {
  xs: { color: string; desc: string };
  sm: { color: string; desc: string };
  md: { color: string; desc: string };
  lg: { color: string; desc: string };
  xl: { color: string; desc: string };
  xxl: { color: string; desc: string };
};

const breakpoints: BreakpointType = {
  xs: { color: 'lime', desc: '宽度 = 480px，屏幕 < 576px 响应式栅格' },
  sm: { color: 'green', desc: '宽度 = 576px，屏幕 ≥ 576px 响应式栅格' },
  md: { color: 'cyan', desc: '宽度 = 768px，屏幕 ≥ 768px 响应式栅格' },
  lg: { color: 'blue', desc: '宽度 = 992px，屏幕 ≥ 992px 响应式栅格' },
  xl: { color: 'geekblue', desc: '宽度 = 1200px，屏幕 ≥ 1200px 响应式栅格' },
  xxl: { color: 'purple', desc: '宽度 = 1600px，屏幕 ≥ 1600px 响应式栅格' },
};
const { useBreakpoint } = Grid;

const CurrentBreakpoint: React.FC<CurrentBreakpointProps> = (props) => {
  const { showLabel = false, ...restProps } = props;

  const screens = useBreakpoint();

  return (
    <div {...restProps}>
      {!showLabel ? null : (
        <Tooltip title="当前响应式布局的断点">
          {/*<Typography.Text>{`当前断点：`}</Typography.Text>*/}
          {`当前断点：`}
        </Tooltip>
      )}
      {Object.entries(screens)
        .filter((screen) => !!screen[1])
        .map((screen) => {
          // @ts-ignore
          const breakpoint = breakpoints[screen[0]];
          return (
            <Tooltip key={screen[0]} title={breakpoint.desc}>
              <Tag bordered={false} color={breakpoint.color}>
                {screen[0]}
              </Tag>
            </Tooltip>
          );
        })}
    </div>
  );
};

export default CurrentBreakpoint;
